<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css"/>
    	<link rel="stylesheet" type="text/css" href="dist/css/app.css"/>
    	<script src="dist/js/jq0908.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/style.js" type="text/javascript" charset="utf-8"></script>
    	<script src="dist/js/public.js" type="text/javascript" charset="utf-8"></script>
		<title>QUANTUM MATERIALS</title>
	</head>
	<body>
		<div class="container-fluid" style="padding: 0;">
			<!--顶部导航-->
			<div class="top-container">
				<div class="top-head">
					<div class="left-info center_V">
						<img src="images/map.png" alt="map icon" class="center_V"/>
						<div class="info-text">
							2018 Symposium on Quantum Materials <br />
							Synthesis: Grand Challenges and Opportunities<br />
							November 15-17, 2018<br />
							Shanghai International Convention Center, Oriental Riverside Hotel, Shanghai
						</div>
					</div>
					<div class="center-logo center_" >
						<img src="images/logo.png" alt="LOGO" class="img-responsive"/>
					</div>
					<div class="right-sharepart center_V">
						<div id="share-title">
							<img src="images/share.png" alt="share icon" />
							Share with someone
						</div>
					</div>
					<div class="right-icon center_V">
						<a href="login.html" id="go_login" data-login="0"><img src="images/login.png" alt="login icon"/></a>
						<a href="javascript:void(0)" id="sign_out" class="btn btn-default">Sign out</a>
					</div>
					
				</div>
				<div class="nav-container clearfix">
					<ul class="list-inline pull-left">
						<li>
							<a href="javascript:void(0)" class="nav-item">INFO</a>
							<ul class="list-unstyled second-nav" >
								<li>
									<a href="importantdate.html">
										IMPORTANT DATES
									</a>
								</li>
								<li>
									<a href="spceilEvent.html">
										SPECIAL EVENTS
									</a>
								</li>
								<li>
									<a href="digest.html">
										DIGEST BOOK
									</a>
								</li>
								<li>
									<a href="qms.html">
										ABOUT QMS
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)" class="nav-item">REGISTER</a>
							<ul class="list-unstyled second-nav" style="min-width: 120%;">
								<li>
									<a href="register.html">
										ACCOUNT
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" id="goposter1">
										 POSTER
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" id="goabstract1">
										ABSTRACT
									</a>
								</li>
								<li>
									<a href="hotel.html">
										HOTEL
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="invitedSpeaker.html" class="nav-item">INVITED SPEAKERS</a>
						</li>
						<li>
							<a href="program.html" class="nav-item">PROGRAM</a>
						</li>
						<li>
							<a href="organization.html" class="nav-item">ORGANIZATION</a>
						</li>
						<li>
							<a href="sponsors.html" class="nav-item">SPONSORS</a>
						</li>
						<li>
							<a href="contract.html" class="nav-item">CONTACT</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="form-submit-part mid-part">
				<img src="images/pic_d.jpg" alt="top img" class="img-responsive"/>
				<div class="page-title center_H">
					<p class="page-title-main"> Registration</p>
					<p class="page-title-minor">————</p>
				</div>
				<div class="form-part center_H">
					<form >
					  <div class="row">
					  	<div class="form-group col-md-6" style="padding-left:0;">
						    <label for="user_name">Name<span style="color:#e75423;">*</span></label>
						    <input type="text" class="form-control" id="user_name" placeholder="your name">
						    <div class="tooltip bottom" role="tooltip" id="name_err">
							  <div class="tooltip-arrow"></div>
							  <div class="tooltip-inner">
							    Name is not empty!
							  </div>
							</div>
						</div>
						<div class="form-group col-md-6" style="padding-right:0;">
						    <label for="unit">Organization<span style="color:#e75423;">*</span></label>
						    <input type="text" class="form-control" id="unit" placeholder="your organization">
						    <div class="tooltip bottom" role="tooltip" id="unit_err">
							  <div class="tooltip-arrow"></div>
							  <div class="tooltip-inner">
							   Organization is not empty!
							  </div>
							</div>
						</div>
					  </div>
					  <div class="row">
					  	
						<div class="form-group col-md-6" style="padding-left:0;">
					    	<label for="email">Email<span style="color:#e75423;">*</span></label>
					    	<input type="email" class="form-control" id="email" placeholder="your email">
					    	<div class="tooltip bottom" role="tooltip" id="email_err">
							  <div class="tooltip-arrow"></div>
							  <div class="tooltip-inner">
							    Email is not empty!
							  </div>
							</div>
						</div>
						<div class="form-group col-md-6" style="padding-right:0;">
					    	<label for="password">Password<span style="color:#e75423;">*</span></label>
					    	<input type="password" class="form-control" id="password" placeholder="your password">
					    	<div class="tooltip bottom" role="tooltip" id="password_err">
							  <div class="tooltip-arrow"></div>
							  <div class="tooltip-inner">
							     Password is not empty!
							  </div>
							</div>
						</div>
					  </div>
					  	<div class="row">
					  		<div class="form-group col-md-6" style="padding-left:0;margin: 0;">
						  		<label >Identity<span style="color:#e75423;">*</span></label>
							    <div class="radio-group">
							    	<label class="radio-inline">
									  <input type="radio" name="Identity" id="Identity1" value="1"> student
									</label>
									<label class="radio-inline">
									  <input type="radio" name="Identity" id="Identity2" value="2"> professor
									</label>
							    </div>
							    <div class="tooltip bottom" role="tooltip" id="identity_err">
								  <div class="tooltip-arrow"></div>
								  <div class="tooltip-inner">
									One must be selected !
								  </div>
								</div>
							</div>
							<div class="col-md-6" style="position: absolute;top: 50%;left: 50%;">
								You can go to <a href="registration.html" style="color:#1e9ca6;">registration fee</a> to pay for it!
							</div>
					  	</div>
					  <div class="btn-sub">
					  	<button type="submit" class="btn" id="register">SUBMIT</button>
					  </div>
					  
					</form>
				</div>
			</div>
			<!--footer-->
			<div class="footer">
				<div class="top-logo">
					<img src="images/logo.png" class="center_" alt="logo"/>
				</div>
				<div class="footer-text">
					sponsored by Fudan Unviversity   Contact Us | by XXX
				</div>
			</div>
		</div>
		<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" id="tips">
		  <div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
		      <div class="modal-header">
		      	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
		      	<h4 class="modal-title" id="mySmallModalLabel">Hints</h4>
		      </div>
		      <div class="modal-body">
					Please go to the mailbox and activate it!
		      </div>
		    </div>
		  </div>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			//	register
			$("#register").click(function(e){
				e.preventDefault()
				var emailReg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/
				var name = $("#user_name").val();
				var unit = $("#unit").val();
				var identity = $("input[name='Identity']:checked").val();
				var email = $("#email").val();
				var password = $("#password").val()
				console.log(emailReg.test(email))
				if(name != '' && unit　!= '' && identity !==undefined && email != '' && password !='' && emailReg.test(email)==true){
					$(".tooltip").css('opacity',0)
					$.ajax({
						type:"post",
						url:"http://10.107.12.43:8080/interwar/user/regist.do",
						async:true,
						dataType:"json",
						data:{"name":name,"identity":identity,"email":email,"unit":unit,"password":password},
						success:function(data){
							if(data.code==0){
								$('#tips').modal('show')
							}else{
								$('#tips .modal-body').html('Your mailbox has been registered, please go to log in!');
								$('#tips').modal('show')
							}
						}
					});
					
					
				}else{
					$(".tooltip").css('opacity',0)
					if(name==''){
						$("#name_err").css('opacity',1)
					}
					if(unit==''){
						//$(".tooltip").css('opacity',0)
						$("#unit_err").css('opacity',1)
					}
					if(email==''){
						//$(".tooltip").css('opacity',0)
						$("#email_err").css('opacity',1)
					}else if(!emailReg.test(email)){
						//$(".tooltip").css('opacity',0)
						$(".tooltip .tooltip-inner").html('Email format is wrong !')
						$("#email_err").css('opacity',1)
					}
					if(password==''){
						//$(".tooltip").css('opacity',0)
						$("#password_err").css('opacity',1)
					}
					if(identity==undefined){
						//$(".tooltip").css('opacity',0)
						$("#identity_err").css('opacity',1)
					}
					
				}
			})
		})
	</script>
</html>
